<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page session="true"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Sign Up &middot; Dilean</title>
        <!-- Bootstrap Core CSS -->
        <link href="resources/mytheme/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="resources/mytheme/css/simple-sidebar.css" rel="stylesheet">
        <script src="resources/mytheme/js/friendsDropdown.js"></script>
        <link href="resources/mytheme/css/font-awesome.css" rel="stylesheet">
        <link href="resources/mytheme/css/font-awesome.min.css" rel="stylesheet">
        <style>
            #wrap{
                background-image: -ms-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
                /* Mozilla Firefox */ 
                background-image: -moz-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
                /* Opera */ 
                background-image: -o-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
                /* Webkit (Safari/Chrome 10) */ 
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #D3D8E8));
                /* Webkit (Chrome 11+) */ 
                background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
                /* W3C Markup, IE10 Release Preview */ 
                background-image: linear-gradient(to bottom, #FFFFFF 0%, #D3D8E8 100%);
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
            legend{
                color:#141823;
                font-size:25px;
                font-weight:bold;
            }
            .signup-btn {
                background: #79bc64;
                background-image: -webkit-linear-gradient(top, #79bc64, #578843);
                background-image: -moz-linear-gradient(top, #79bc64, #578843);
                background-image: -ms-linear-gradient(top, #79bc64, #578843);
                background-image: -o-linear-gradient(top, #79bc64, #578843);
                background-image: linear-gradient(to bottom, #79bc64, #578843);
                -webkit-border-radius: 4;
                -moz-border-radius: 4;
                border-radius: 4px;
                text-shadow: 0px 1px 0px #898a88;
                -webkit-box-shadow: 0px 0px 0px #a4e388;
                -moz-box-shadow: 0px 0px 0px #a4e388;
                box-shadow: 0px 0px 0px #a4e388;
                font-family: Arial;
                color: #ffffff;
                font-size: 20px;
                padding: 10px 20px 10px 20px;
                border: solid #3b6e22  1px;
                text-decoration: none;
            }
            .signup-btn:hover {
                background: #79bc64;
                background-image: -webkit-linear-gradient(top, #79bc64, #5e7056);
                background-image: -moz-linear-gradient(top, #79bc64, #5e7056);
                background-image: -ms-linear-gradient(top, #79bc64, #5e7056);
                background-image: -o-linear-gradient(top, #79bc64, #5e7056);
                background-image: linear-gradient(to bottom, #79bc64, #5e7056);
                text-decoration: none;
            }
            .navbar-default .navbar-brand{
                color:#fff;
                font-size:30px;
                font-weight:bold;
            }
            .form .form-control { margin-bottom: 10px; }
            @media (min-width:768px) {
                #home{
                    margin-top:50px;
                }
                #home .slogan{
                    color: #0e385f;
                    line-height: 29px;
                    font-weight:bold;
                }
            }
        </style>
    </head>
    <body>
        <div class="container" id="wrap">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <form action="http://localhost:8080/Dilean/registerSuccess.jsp"  name="myForm"  
                          onsubmit="return(validate());">   <legend center">Sign Up</legend>
                        <script type="text/javascript">
                            // Form validation code
                            function validate()
                            {

                                if (document.myForm.firstname.value == "")
                                {
                                    alert("Please provide your name!");
                                    document.myForm.firstname.focus();
                                    return false;
                                }
                                if (document.myForm.lastname.value == "")
                                {
                                    alert("Please provide your last name!");
                                    document.myForm.lastname.focus();
                                    return false;
                                }
                                if (document.myForm.email.value == "")
                                {
                                    alert("Please provide your Email!");
                                    document.myForm.email.focus();
                                    return false;
                                }
                                var emailID = document.myForm.email.value;
                                atpos = emailID.indexOf("@");
                                dotpos = emailID.lastIndexOf(".");
                                if (atpos < 1 || (dotpos - atpos < 2))
                                {
                                    alert("Please enter correct email ID")
                                    document.myForm.email.focus();
                                    return false;
                                }
                                if (document.myForm.password.value == "")
                                {
                                    alert("Please enter password!");
                                    return false;
                                }
                                if (document.myForm.confirm_password.value == "")
                                {
                                    alert("Please confirm your password!");
                                    return false;
                                }
                                if ((document.myForm.password.value) == (document.myForm.confirm_password.value))
                                {
                                    return true;
                                }
                                else {
                                    myForm.password.value = "";
                                    myForm.confirm_password.value = "";
                                    alert("Password Must be equal!");
                                    return false;
                                }
                                return true;
                            }
                        </script>
                        <h4 align="center">It's free and always will be.</h4>
                        <div class="row">
                            <div class="col-xs-6 col-md-6">
                                <input type="text" name="firstname" value="" class="form-control input-lg" placeholder="First Name"  />                       
                            </div>
                            <div class="col-xs-6 col-md-6">
                                <input type="text" name="lastname" value="" class="form-control input-lg" placeholder="Last Name"  />                        
                            </div>
                        </div>
                        <input type="text" name="email" value="" class="form-control input-lg" placeholder="Your Email"  />
                        <input type="password" name="password" value="" class="form-control input-lg" placeholder="Password"  />
                        <input type="password" name="confirm_password" value="" class="form-control input-lg" placeholder="Confirm Password"  />                   
                        <label>Birth Date</label>                    
                        <div class="row">
                            <div class="col-xs-4 col-md-4">
                                <select name="month" class = "form-control input-lg">
                                    <option value="01">Jan</option>
                                    <option value="02">Feb</option>
                                    <option value="03">Mar</option>
                                    <option value="04">Apr</option>
                                    <option value="05">May</option>
                                    <option value="06">Jun</option>
                                    <option value="07">Jul</option>
                                    <option value="08">Aug</option>
                                    <option value="09">Sep</option>
                                    <option value="10">Oct</option>
                                    <option value="11">Nov</option>
                                    <option value="12">Dec</option>
                                </select>                        
                            </div>
                            <div class="col-xs-4 col-md-4">
                                <select name="day" class = "form-control input-lg">
                                    <%
                                        for (int i = 1; i <= 31; i++) {
                                    %>
                                    <option value="<%=i%>"><%=i%></option>
                                    <%
                                        }
                                    %>                                       


                                </select>                        
                            </div>
                            <div class="col-xs-4 col-md-4">
                                <select name="year" class = "form-control input-lg">
                                    <% for (int i = 1935; i <= 2013; i++) {

                                    %>
                                    <option value="<%=i%>"><%=i%></option>
                                    <%
                                        }
                                    %>

                                </select>                        
                            </div>
                        </div>
                        <label>Gender : </label>                   
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="M" id=male />                        Male
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="F" id=female />                        Female
                        </label>
                        <br />
                        <span class="help-block">By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span>
                        <button class="btn btn-lg btn-primary btn-block signup-btn" type="submit">
                            Create my account</button>
                    </form>
                </div>            
            </div>
        </div>
    </body>
</html>
